<template>
	<view class="page">
    <view class="invoice-header" :style="{height:'calc(260rpx + '+ CustomBar+'px)',paddingTop:StatusBar+'px'}">
      <view class="customBar flex align-center" :style="{height:CustomBar - StatusBar +'px'}" @click="back">
        <text class="cuIcon-back text-xl text-white"></text>
      </view>
      <view class="invoice-header-contet flex flex-direction align-center justify-center">
        <view class="invoice-status text-lg text-bold text-white">{{invoiceData.invoice_status ==1?i18n['开票中']:i18n['已开票']}}</view>
        <view class="invoice-status-title flex justify-center align-center">
          <text class="text-df text-weight-400 text-white">{{ i18n['预计发票金额'] }}：￥{{invoiceData.invoice_price}}</text>
          <image :src="imgWechatUrl+'/invoice/help.png'" mode="widthFix" @click="show = true"></image>
        </view>
      </view>
    </view>
    <view class="invoice-step-wrap">
      <view class="invoice-step-title text-333 text-df text-weight-400">{{ i18n['增值税电子普通发票'] }}</view>
      <view class="invoice-step  flex justify-center align-center">
        <view class="invoice-step-1  flex flex-direction align-center">
          <image class="img" :src="imgWechatUrl+'/invoice/done.png'" mode="widthFix"></image>
          <view class="text-df text-weight-400 text-666">
            {{ i18n['订单完成'] }}
          </view>
        </view>
        <view class="invoice-step-line">

        </view>
        <view class="invoice-step-2 flex flex-direction align-center " :class="invoiceData.invoice_status ==1?'text-bf':'text-333'">
          <image class="img" :src="invoiceData.invoice_status ==1?imgWechatUrl+'/invoice/no-done.png':imgWechatUrl+'/invoice/done.png'" mode="widthFix" ></image>
          <view class="text-df text-weight-400">
            {{ i18n['开票完成'] }}
          </view>
        </view>
      </view>
    </view>
    <view class="invoice-info">
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['发票类型'] }}
        </view>
        <view class="text-333 text-df ">
          {{ i18n['电子普通发票'] }}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['发票内容'] }}
        </view>
        <view class="text-333 text-df ">
          {{ i18n['商品明细'] }}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['抬头类型'] }}
        </view>
        <view class="text-333 text-df ">
          {{invoiceData.invoice_type == 1?i18n['个人']:i18n['企业']}}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['发票抬头'] }}
        </view>
        <view class="text-333 text-df ">
          {{invoiceData.invoice_title}}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex" v-if="invoiceData.invoice_type == 2">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['公司税号'] }}
        </view>
        <view class="text-333 text-df " >
           {{invoiceData.invoice_company_duty_paragraph}}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['开票金额'] }}
        </view>
        <view class="text-333 text-df ">
          ￥{{invoiceData.invoice_price}}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex" v-if="invoiceData.invoice_update_time">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['开票时间'] }}
        </view>
        <view class="text-333 text-df ">
          {{invoiceData.invoice_update_time}}
        </view>
      </view>
      <view class="invoive-item margin-b-32 text-weight-400 flex">
        <view class="margin-r-24 text-999 text-df">
          {{ i18n['申请时间'] }}
        </view>
        <view class="text-333 text-df ">
          {{invoiceData.invoice_add_time}}
        </view>
      </view>
      <view class="download" v-if="invoiceData.invoice_status ==2">
        <view class="flex align-center" @click="downloadInvoive">
          <image :src="imgWechatUrl+'/invoice/down.png'" mode="widthFix" class="img"></image>
          <text class="text-df text-weight-500">{{ i18n['下载发票'] }}</text>
        </view>
        <view class="invoice-look">
          <!-- <image src="../../static/invoice.jpeg" mode="widthFix"></image> -->
          <image :src="invoiceData.invoice_img" mode="widthFix" @click="previewImg(invoiceData.invoice_img)" />
        </view>
      </view>
    </view>
    <fu-popup v-model="show" mode="bottom" z-index="100" :safe-area-inset-bottom="true" :border-radius="24" ref="popupInvoice" @close="closeshowDrawer">
      <view class="invoice-introduce-content">
        <view class="invoice-introduce-title flex justify-between align-center">
          <text class="cuIcon-close text-xl text-white"></text>
          <text class="text-xl text-333 text-bold">{{ i18n['开票金额说明'] }}</text>
          <text class="cuIcon-close text-xl text-333" @click="show = false"></text>
        </view>
        <view class="invoice-introduce-info text-999 text-df text-weight-400">
          <jyf-parser v-html="invoiceData.invoice_rule ? invoiceData.invoice_rule:i18n['空']"></jyf-parser>
        </view>
      </view>
    </fu-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        show:false,
        content:global.i18n['·开票金额为消费者实付金额。·现展示为订单预计开票金额，最终金额以发票实际开具为准'],
        invoiceData:{
          billing_type: 1,
          invoice_add_time: "",
          invoice_company_duty_paragraph: "",
          invoice_email: null,
          invoice_price: "",
          invoice_send_goods_num: '',
          invoice_status: "1",
          invoice_title: "",
          invoice_type: "",
          invoice_update_time: 0,
          invoice_rule:''
        }
			}
		},
    onLoad(options) {
      let {order_sn} = options;
      console.log(order_sn);
      if(order_sn){
        this.getInvoiceData(order_sn);
      }
    },
		methods: {
      /**
       * 返回
       */
      back(){
        uni.navigateBack({
          delta:1
        })
      },
      /**
       * @description 关闭发票弹窗
       */
      closeshowDrawer() {
        this.show = false;

      },
      previewImg(url){
        uni.previewImage({
          urls: [url],
          current:url
        });
      },
      /**
       * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
       * @param {String} order_sn 订单号
       */
      getInvoiceData(order_sn) {
        this.$api
          .post(global.apiUrls.pistInvoiceSelect, { order_sn: order_sn })
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              if (res.data.data) {
                if(res.data.data.invoice_type) this.invoiceData = res.data.data;
              }
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      },
      /**
       * 下载发票
       */
      downloadInvoive(){
        let img = this.invoiceData.invoice_img;
        console.log(img)
        if(!img){
          this.$message.info(this.i18n['发票链接有误']);
          return;
        }
        uni.showLoading({
          title: this.i18n['下载中...']
        });
        uni.downloadFile({
          url: img,
          success: (res) => {
              uni.hideLoading();
              if (res.statusCode === 200) {
                  // console.log(res);
                  let tempFilePath = res.tempFilePath;
                  // console.log(tempFilePath)
                  uni.saveImageToPhotosAlbum({
                      filePath: tempFilePath,
                      success: function () {
                          console.log('save success');
                      }
                  });
                  // uni.saveFile({
                  //   tempFilePath: tempFilePath,
                  //   success: function (res) {
                  //     console.log('保存成功',res.savedFilePath)
                  //     // var savedFilePath = res.savedFilePath;
                  //   },
                  //   fail:function(error){
                  //     console.log(error)
                  //   }
                  // });
              }
          },
          fail:(err)=>{
            uni.hideLoading();
            console.log(err);
          }
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
.invoice-header{
  // background: linear-gradient(139deg,#FA2033,#FF6530);
  background: url($IMG_WECHAT_URL+'invoice/invoice-bg.png') no-repeat center/cover;
  .customBar{
    padding-left: 32rpx;
  }
  .invoice-header-contet{
    height: 220rpx;
    .invoice-status{

    }
    .invoice-status-title{
      margin-top: 32rpx;
      image{
        width: 32rpx;
        height: 32rpx;
        margin-left: 28rpx;
      }
    }
  }

}
.invoice-step-wrap{
  width: 750rpx;
  height: 258rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-top: -40rpx;
  .invoice-step-title{
    padding: 40rpx 0 36rpx;
    width: 100%;
    text-align: center;
  }
  .img{
    width: 66rpx;
    height: 66rpx;
    margin-bottom: 4rpx;
    position: relative;
    z-index: 99;
  }
  .invoice-step{
    position: relative;
    &::after{
      content: '';
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 236rpx;
      height: 0px;
      border: 2rpx solid #EEEEEE;
    }
    .invoice-step-1{
      margin-right: 75rpx;
    }
    .invoice-step-2{
      margin-left: 75rpx;
    }
  }

}
.invoice-info{
  padding: 32rpx 24rpx 0;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-top: 20rpx;
  overflow: hidden;
}
.text-bf{
  color: #bfbfbf;
}
.margin-r-24{
  margin-right: 24rpx;
}
.margin-b-32{
  margin-bottom: 32rpx;
}
.download{
  padding: 8rpx 0rpx 20rpx;
  box-sizing: border-box;
  .img{
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
  }
  text{
    color: #2F98FE;
  }
  .invoice-look{
    background: #FFFFFF;
    box-shadow: 0px 3rpx 15rpx rgba(0, 0, 0, 0.06);
    border-radius: 16rpx;
    padding: 13rpx 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    image{
      width: 100%;
      height: auto;
    }
  }
}
.invoice-introduce-content{
  padding: 32rpx 24rpx 48rpx;
  box-sizing: border-box;
  .invoice-introduce-info{
    margin-top: 48rpx;
  }
}
</style>
